<template>
  <n-flex class="login-bg" justify="center" align="center">
    <n-card class="card-bg-set" :bordered="false">
      <n-tabs class="card-tabs"
              default-value="signPwd"
              size="large"
              animated
              pane-wrapper-style="margin: 0 -4px"
              pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
      >
        <n-tab-pane name="signPwd" tab="密码登录">
          <n-form ref="loginFormPwd"
                  :model="user"
                  :rules="rulesPwd"
          >
            <n-form-item label="账户" path="username">
              <n-input type="text"
                       v-model:value="user.username"
                       placeholder="请输入账户"
                       maxlength="18"
                       size="large"
              >
                <template #prefix>
                  <n-icon><PersonOutline /></n-icon>
                </template>
              </n-input>
            </n-form-item>
            <n-form-item label="密码" path="password">
              <n-input type="password"
                       v-model:value="user.password"
                       placeholder="请输入密码" show-password-on="mousedown"
                       size="large"
                       maxlength="16"
              >
                <template #prefix>
                  <n-icon><LockClosedOutline/> </n-icon>
                </template>
              </n-input>
            </n-form-item>
            <n-button type="info" block strong @click="loginClick">登 录</n-button>
          </n-form>
        </n-tab-pane>
        <n-tab-pane name="signPho" tab="短信登录">
          <n-form :model="user"
                  :rules="rulesPhone"
                  ref="loginFormPhone"
          >
            <n-form-item label="号码">
              <n-input placeholder="请输入手机号码" size="large">
                <template #prefix>
                  <n-icon><PhonePortraitOutline/></n-icon>
                </template>
              </n-input>
            </n-form-item>
            <n-form-item label="验证码">
              <n-input-group>
                  <n-input placeholder="请输入验证码" size="large">
                    <template #prefix>
                      <n-icon><KeyOutline/></n-icon>
                    </template>
                  </n-input>
                  <n-button type="primary" size="large" >获取验证码</n-button>
              </n-input-group>
            </n-form-item>
            <n-button type="info" block strong >验证登录</n-button>
          </n-form>
        </n-tab-pane>
      </n-tabs>
      <template #footer>
        <n-space justify="space-around">
          <n-text type="default" class="hover-pointer" @click="to('register')">没有账号？</n-text>
          <n-text type="info" class="hover-pointer" @click="to('forgot')">忘记密码？</n-text>
        </n-space>
      </template>
    </n-card>
  </n-flex>
</template>

<script>
import { ref, inject, defineComponent } from 'vue';
import {PersonOutline,
  PhonePortraitOutline,
  LockClosedOutline,
  KeyOutline} from '@vicons/ionicons5'
import {login} from "@/request/api/system.js";

export default defineComponent({
  name: "LoginView",
  components:{
    PersonOutline,
    PhonePortraitOutline,
    LockClosedOutline,
    KeyOutline
  },
  setup(){
    const {toPage} = inject('toPage')
    const loginForm = ref(null);
    const loginFormPhone = ref(null)
    let user = ref({
      //账户
      username: null,
      //密码
      password: null,
      //电话号码
      phone:null,
      //验证码
      checkCode:null
    })
    //测试用户
    const admin = ref({
      order:'353762489',
      headerImg:'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg',
      nickName:"王大锤",
      username:'1212567',
      password:'123456',
      name:'小明',
      sex:'男',
      age:'25'
    })
    //登录校验
    const rulesPwd = {
      username:{
        required:true,
        validator(rule, value){
          if(!value){
            return new Error("请输入账户")
          } else if (value.length<6){
            return new Error("账户至少为六位数")
          }
        },
        trigger: ['input','blur']
      },
      password:{
        required:true,
        validator(rule, value){
          if(!value){
            return new Error("请输入密码")
          } else if (value.length<6){
            return new Error("密码至少为六位数")
          }
        },
        trigger: ['input','blur']
      }
    }
    const rulesPhone = {
      phone:{

      },
      checkCode:{

      }
    }
    //登录请求
    function loginClick(e) {
      e.preventDefault();
      loginForm.value?.validate((errors) => {
        if(!errors){
          //登录接口
          // login({
          //   username:user.value.username,
          //   password:user.value.password
          // }).then((res)=>{
          //   console.log(res)
          //   sessionStorage.setItem("user",JSON.stringify(admin.value))
          //   $message.destroyAll()
          //   $message.success("登录成功")
          //   toPage('screens')
          // })
          sessionStorage.setItem("user",JSON.stringify(admin.value))
          $message.destroyAll()
          $message.success("登录成功")
          toPage('screens')
        } else {
          $message.destroyAll()
          $message.error("登录失败")
        }
      })
    }
    return {
      loginFormPwd:loginForm,
      loginFormPhone:loginFormPhone,
      user:user,
      to:toPage,
      loginClick:loginClick,
      rulesPwd:rulesPwd,
      rulesPhone:rulesPhone
    }
  }
})

</script>

<style lang="scss" scoped>
.login-bg{
  position: relative;
  background: url("@/assets/images/system/login-bg.jpg") center center;
  background-origin: border-box;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
}
.card-bg-set{
  position: relative;
  left: 18rem;
  width: 27rem;
  background-color: #f1c4cd77;
}

</style>